<template>
  <!-- 发布资讯页面 -->
  <div>
    <el-form
      ref="article_form"
      :model="articleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      style="padding-top: 20px; margin-left: 30px; margin-bottom: 50px"
    >
      <!-- 发布的标题 -->
      <el-form-item label="标题" prop="title" style="width: 60%">
        <el-input v-model="articleForm.title" />
      </el-form-item>
      <!-- 风采的分类 -->
      <el-form-item label="分类" prop="categoryId">
        <el-select v-model="articleForm.categoryId" placeholder="请选择栏目分类">
          <el-option
            v-for="data in articleCategoryData.filter((item) => !item.parentId)"
            :key="data.id"
            :label="data.name"
            :value="data.id"
          />
        </el-select>
      </el-form-item>

      <!-- 上传封面 -->
      <el-form-item label="封面" prop="cover">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="articleForm.cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <span>文件大小不允许超过3M</span>
      </el-form-item>

      <!-- 风采内容编辑框 -->
      <el-form-item label="正文" prop="content" style="margin-top: 110px; width: 90%">
        <tinymce v-model="articleForm.content" :height="240" />
      </el-form-item>

      <!-- 底部按钮 -->
      <el-form-item style="position: absolute; right: 10%; margin-top: -10px">
        <el-button @click="resetForm('article_form')">返回</el-button>
        <el-button type="primary" @click="submitForm('article_form')">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入Tinymce组件
import Tinymce from '@/components/Tinymce'
import { get, post } from '@/utils/request'
// 引入文件上传路径 和 文件预览的路径
import { showFileURL, uploadFileURL } from '@/utils/config'
export default {
  // 注册Tinymce组件
  components: { Tinymce },
  data() {
    return {
      // 上传文件的服务器地址
      uploadFileURL,
      // 发布文章的表单
      articleForm: {
        // 风采标题
        title: '',
        // 产品栏目名称
        categoryId: '',
        // 风采编辑的内容
        content: '',
        // 封面图片
        img: ''
      },
      // 图片预览路径
      imageUrl: '',

      // 产品栏目数据
      articleCategoryData: [],

      rules: {
        title: [{ required: true, message: '请输入风采标题', trigger: 'blur' }],
        categoryId: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请填写风采内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  created() {
    // 自动获取文章栏目数据
    this.queryCategoryData()
  },
  mounted() { },
  methods: {
    // 获取产品栏目的方法
    async queryCategoryData() {
      const res = await get('/category/findAll')
      this.articleCategoryData = res.data
    },

    submitForm(formName) {
      this.$refs['article_form'].validate(async (valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/article/saveOrUpdate', this.articleForm)
          // 给用户一个成功的提示
          if (res.status === 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.$router.push({
              // 跳转的路由路径
              path: '/admin/info/article/List'
            })
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs['article_form'].resetFields()
      this.$router.push({
        // 跳转的路由路径
        path: '/admin/info/article/List'
      })
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 上传成功之后 更新articleForm.cover的路径
      this.articleForm.cover = showFileURL + res.data.id
    },
    // 上传图片时的一些限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt3M = file.size / 1024 / 1024 < 3

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
      return isJPG && isLt3M
    }
  }
}
</script>
<style scoped>
.header {
  position: absolute;
}
</style>
